import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  panel: {
    display: "flex",
    fontSize: "12px",
    marginTop: "10px",
  },
  clauses: {
    flex: "1",
  },
  wherePanel: {
    display: "flex",
  },
  conditionPanel: {
    display: "flex",
    flexWrap: "wrap",
  },
  brackets: {
    margin: "0 8px",
  },
  item: {
    display: "flex",
    alignItems: "center",
    marginBottom: "8px",
  },
  ellipsis: {
    textOverflow: "ellipsis",
    overflow: "hidden",
    wordBreak: "break-all",
    whiteSpace: "nowrap",
  },
  itemJoint: {
    color: "#999999",
    margin: "0 8px",
  },
  singleClause: {
    padding: "3px 18px 3px 24px",
    border: "#D9D9D9 1px dashed",
    borderRadius: "4px",
    color: "#999999",
    display: "flex",
    maxWidth: "465px",
    overflow: "hidden",
  },
  singleClauseOper: {
    margin: "0 8px",
  },
  singleClauseValue: {
    color: "#333",
    marginRight: "16px",
    flex: 1,
  },
  singleClauseClose: {
    position: "relative",
    top: "2px",
    cursor: "pointer",
  },
  tailSlot: {
    marginLeft: "16px",
  },
});

export default useStyles;
